<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {useRoute} from "vue-router";
import SettingHeader from "@/components/SettingHeader.vue";
import router from "@/router/index.js";
import {useUserStore} from "@/stores/UserStore.js";

const Router = useRoute()

const game = reactive({
  goodCfg: '',
  badCfg: '',
  gameT1: '',
  gameT2: '',
  gamePrice: 0,
  gamePriceDis: 0,
  IntroductionToTheGame: '',
  gameLabel: '',
  publishers: [],
  developers: [],
  DLCs: [],
  type: [],
  steam_appid: 0,
  required_age: 0,
  is_free: false,
  controller_support: '',
  detailed_description: '',
  about_the_game: '',
  supported_languages: '',
  price_overview: {},
  screenshots: [],
  movies: [],
  release_date: '',
  categories: [],
  platforms: {}
})

const title = ref("")
const type = ref("jpg");
const src = ref("")

onMounted(() => {
  axios.get("http://localhost:3000/app", {
    params: {
      AppId: Router.params.id
    }
  }).then(response => {
    const reply = response.data.reply[Router.params.id]

    if (reply.success) {
      let data = reply.data
      game.type = data.type
      game.gameT1 = data.name;
      title.value = game.gameT1
      game.gameT2 = data.legal_notice;
      game.steam_appid = data.steam_appid;
      game.required_age = data.required_age;
      game.is_free = data.is_free;
      game.controller_support = data.controller_support;
      game.DLCs = data.dlc;
      game.detailed_description = data.detailed_description;
      game.about_the_game = data.about_the_game;
      game.supported_languages = data.supported_languages;
      game.badCfg = data.pc_requirements.minimum;
      game.goodCfg = data.pc_requirements.recommended;
      game.developers = data.developers;
      game.publishers = data.publishers;
      if (!game.is_free) {
        game.price_overview = data.price_overview;
      }
      game.categories = data.categories;
      game.screenshots = data.screenshots;
      src.value = game.screenshots[0].path_thumbnail
      game.movies = data.movies;
      game.release_date = data.release_date.date;
      game.platforms = data.platforms
      game.short_description = data.short_description
    }
  })
})

const handleClick = (imageSrc) => {
  let newSrc = imageSrc;

  // 如果是图片链接，更新分辨率为 1920x1080
  if (newSrc.includes(".jpg")) {
    newSrc = newSrc.replace(/(\d+)x(\d+)\.jpg/, "1920x1080.jpg");
    type.value = "jpg";
  }

  // 如果是视频链接，直接更新为 webm 格式
  else if (newSrc.includes(".webm")) {
    type.value = "webm";
  }

  // 更新图片或视频的源
  src.value = newSrc;
}

function play(event) {
  event.target.play()
}

const ero = "暂无介绍"
const sendBuy = async () => {
  const setOutTradeNo = Date.now();
  if (game.is_free || parseInt(Router.params.have) === 1 || parseInt(Router.params.gid) === -1) {
    console.log("out")
  } else {
    const url = await axios.get('http://localhost:8081/Pay/G_pay', {
      params: {
        Price: game.price_overview.initial / 100,
        ShopName: game.gameT1,
        ShopPayCode: setOutTradeNo
      }
    })
    if (url.data) {
      await axios.post("http://localhost:8081/Shop/insert", {
        Price: game.price_overview.initial / 100,
        userId: useUserStore().getUserInfo.id,
        ShopName: game.gameT1,
        goodId: Router.params.gid,
        ShopPayCode: setOutTradeNo
      }, {
        headers: {
          "Content-Type": 'application/json'
        }
      })
    } else {
      return
    }

    location.href = url.data;

    await axios.get("http://localhost:3000/S_Pay", {
      params: {
        ShopPayCode: setOutTradeNo
      }
    })
  }
}
</script>

<template>
  <SettingHeader :title = "title" :url = "(Number(Router.params.gid) !== -1 ? {name:'shop'}:{name:'plCenter'})" />
  <div class = "displayed border" v-if = "type === 'jpg'">
    <img :src = "src" alt = "">
  </div>
  <div class = "displayed border" v-if = "type === 'webm'">
    <video :src = "src" autoplay controls @canplay = "play"></video>
  </div>
  <div class = "displayedList">
    <ul class = "border">
      <li v-for = "(item) in game.movies" :key = "item.id"><img
          :src = "item.thumbnail"
          alt = ""
      >
        <svg t = "1738997164168" class = "icon" viewBox = "0 0 1024 1024" version = "1.1"
             @click = "handleClick(item.webm.max)"
             xmlns = "http://www.w3.org/2000/svg" p-id = "4218" width = "38" height = "38">
          <path
              d = "M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
              fill = "#eee" p-id = "4219"></path>
          <path
              d = "M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
              fill = "#eee" p-id = "4220"></path>
        </svg>
      </li>
      <li v-for = "(item) in game.screenshots" :key = "item.id"><img
          :src = "item.path_thumbnail"
          alt = ""
          @click = "handleClick(item.path_thumbnail)">
      </li>
    </ul>
  </div>
  <div class = "priceBox border p-2">
    <div class = "border">
      <div v-if = "!game.is_free">
        <span class = "Rpr">￥{{ game?.price_overview.final / 100 }}</span>
        <span class = "Rrr" v-if = "!game.price_overview.final === game.price_overview.initial">￥{{
            game?.price_overview.initial / 100
          }}</span>
        <span class = "dis"
              v-if = "!game.price_overview.discount_percent === 0">-{{ game?.price_overview.discount_percent }}%</span>
      </div>
      <div v-if = "game.is_free">免费开玩</div>
    </div>
  </div>
  <div class = "title p-2 border">
    <span class = "t1">{{ game.gameT1 }}</span>
    <p class = "t2" v-html = "game.gameT2"></p>
    <div class = "label border">
      <span class = "border" v-for = "item in game.categories" :key = "item.id">{{ item.description }}</span>
      <div class = "border">支持:
        <span v-if = "game.platforms.windows" class = "SyLogo border"><svg t = "1739155413457" class = "icon"
                                                                           viewBox = "0 0 1024 1024" version = "1.1"
                                                                           xmlns = "http://www.w3.org/2000/svg"
                                                                           p-id = "4177" width = "16"
                                                                           height = "16"><path
            d = "M0.24 483.776h412.944V88.656L0.24 148.48v335.296zM469.648 80.464v403.312h554.096V0.24L469.648 80.464zM0.24 875.536l412.944 59.808V540.256H0.24v335.28z m469.408 68l554.096 80.224V540.256H469.648v403.28z"
            fill = "#2c2c2c" p-id = "4178"></path></svg></span>
        <span v-if = "game.platforms.mac" class = "SyLogo border">
          <svg t = "1739155648803" class = "icon" viewBox = "0 0 1024 1024" version = "1.1"
               xmlns = "http://www.w3.org/2000/svg" p-id = "5296" width = "16" height = "16"><path
              d = "M849.124134 704.896288c-1.040702 3.157923-17.300015 59.872622-57.250912 118.190843-34.577516 50.305733-70.331835 101.018741-126.801964 101.909018-55.532781 0.976234-73.303516-33.134655-136.707568-33.134655-63.323211 0-83.23061 32.244378-135.712915 34.110889-54.254671 2.220574-96.003518-54.951543-130.712017-105.011682-70.934562-102.549607-125.552507-290.600541-52.30118-416.625816 36.040844-63.055105 100.821243-103.135962 171.364903-104.230899 53.160757-1.004887 103.739712 36.012192 136.028093 36.012192 33.171494 0 94.357018-44.791136 158.90615-38.089503 27.02654 1.151219 102.622262 11.298324 151.328567 81.891102-3.832282 2.607384-90.452081 53.724599-89.487104 157.76107C739.079832 663.275355 847.952448 704.467523 849.124134 704.896288M633.69669 230.749408c29.107945-35.506678 48.235584-84.314291 43.202964-132.785236-41.560558 1.630127-92.196819 27.600615-122.291231 62.896492-26.609031 30.794353-50.062186 80.362282-43.521213 128.270409C557.264926 291.935955 604.745311 264.949324 633.69669 230.749408"
              p-id = "5297"></path></svg>

        </span>
        <span v-if = "game.platforms.linux" class = "SyLogo border"><svg t = "1739155681178" class = "icon"
                                                                         viewBox = "0 0 1024 1024" version = "1.1"
                                                                         xmlns = "http://www.w3.org/2000/svg"
                                                                         p-id = "6372" width = "16"
                                                                         height = "16"><path
            d = "M867.367 780.036c-6.643-7.44-9.7-21.193-13.087-35.875-3.322-14.615-7.109-30.36-19.134-40.525v-0.066a50.224 50.224 0 0 0-14.814-8.902c16.741-49.494 10.164-98.788-6.644-143.299-20.727-54.675-56.801-102.309-84.371-134.861-30.826-38.93-60.987-75.868-60.455-130.41 0.93-83.31 9.168-237.769-137.386-237.968-5.98 0-12.158 0.266-18.602 0.797-163.827 13.154-120.379 186.215-122.837 244.146-2.99 42.385-11.56 75.735-40.724 117.19-34.214 40.724-82.378 106.56-105.232 175.187-10.762 32.353-15.944 65.371-11.16 96.595a50.638 50.638 0 0 0-4.253 4.186c-10.031 10.695-17.472 23.717-25.776 32.486-7.706 7.706-18.734 10.63-30.825 14.948-12.158 4.384-25.445 10.762-33.483 26.241v0.067a46.637 46.637 0 0 0-5.116 22.52c0 7.176 1.063 14.417 2.126 21.393 2.259 14.615 4.518 28.367 1.528 37.668-9.566 26.241-10.829 44.311-4.052 57.465 6.776 13.22 20.594 19 36.34 22.256 31.423 6.643 74.007 4.982 107.556 22.72l2.857-5.447-2.857 5.447c35.875 18.801 72.347 25.445 101.379 18.868a65.77 65.77 0 0 0 46.902-36.672c22.72-0.133 47.634-9.7 87.56-11.958 27.106-2.126 60.987 9.633 99.851 7.507a53.546 53.546 0 0 0 4.518 12.157l0.066 0.067c15.08 30.227 43.182 43.98 73.078 41.654 29.895-2.392 61.65-19.997 87.36-50.623l-4.65-3.986 4.65 3.986c24.582-29.762 65.24-42.053 92.212-58.33 13.486-8.17 24.447-18.335 25.245-33.15 0.863-14.748-7.84-31.29-27.77-53.48z"
            fill = "#202020" p-id = "6373"></path><path
            d = "M882.846 832.85c-0.465 9.102-7.108 15.945-19.266 23.253-24.447 14.748-67.696 27.504-95.266 60.986-24.05 28.567-53.28 44.18-79.057 46.239-25.71 1.993-47.9-8.637-61.053-34.945v-0.133c-8.172-15.479-4.783-39.86 2.06-65.57 6.842-25.71 16.674-52.151 18.003-73.61v-0.066c1.329-27.57 2.923-51.553 7.573-70.088 4.65-18.601 11.892-31.091 24.78-38.2a58.196 58.196 0 0 1 1.794-0.93c1.462 23.85 13.287 48.165 34.147 53.414 22.787 5.979 55.672-13.553 69.557-29.564l8.105-0.265c12.224-0.333 22.388 0.398 32.885 9.5v0.066c8.038 6.776 11.892 19.665 15.213 34.014 3.322 14.417 5.98 30.095 15.878 41.256 19.067 21.26 25.245 35.476 24.647 44.644z m-463.644 67.432v0.199c-2.259 28.899-18.602 44.644-43.581 50.357-25.046 5.713-58.994 0-92.875-17.671-37.535-19.93-82.18-17.938-110.746-23.917-14.35-2.99-23.717-7.507-27.969-15.811-4.252-8.37-4.384-22.92 4.717-47.833v-0.066l0.067-0.133c4.517-13.885 1.195-29.098-0.997-43.382-2.192-14.217-3.255-27.238 1.594-36.273l0.067-0.066c6.245-12.025 15.413-16.343 26.773-20.395 11.294-4.12 24.78-7.308 35.41-17.938l0.066-0.066h0.066c9.832-10.43 17.273-23.451 25.91-32.686 7.307-7.773 14.615-12.954 25.577-13.02h0.332a40.525 40.525 0 0 1 6.178 0.53c14.616 2.193 27.305 12.424 39.595 29.032l35.41 64.508v0.066c9.433 19.665 29.297 41.323 46.171 63.379 16.875 22.122 29.896 44.245 28.235 61.186z"
            fill = "#F8BF11" p-id = "6374"></path><path
            d = "M595.784 298.72c-2.857-5.58-8.636-10.895-18.602-14.948-20.594-8.836-29.496-9.434-40.99-16.874-18.601-12.025-34.08-16.21-46.902-16.21a55.406 55.406 0 0 0-18.07 3.122c-15.679 5.315-26.042 16.609-32.553 22.72-1.329 1.263-2.923 2.326-6.91 5.315-3.985 2.857-9.964 7.308-18.6 13.819-7.774 5.713-10.232 13.287-7.574 22.056 2.657 8.77 11.094 18.934 26.573 27.703h0.067c9.633 5.647 16.21 13.287 23.783 19.332a53.214 53.214 0 0 0 12.556 7.773c4.784 2.06 10.364 3.455 17.273 3.853 16.476 0.997 28.567-3.986 39.197-10.031 10.629-6.112 19.664-13.553 30.028-16.94h0.066c21.26-6.644 36.406-19.998 41.19-32.753a21.525 21.525 0 0 0-0.532-17.937z"
            fill = "#D6A312" p-id = "6375"></path><path
            d = "M541.84 330.077c-16.941 8.835-36.672 19.531-57.732 19.531-20.993 0-37.602-9.699-49.493-19.2-5.98-4.65-10.83-9.433-14.483-12.82-6.378-4.983-5.58-12.026-2.99-11.826 4.385 0.531 5.05 6.311 7.773 8.902 3.72 3.455 8.37 7.972 14.018 12.423 11.294 8.969 26.374 17.672 45.175 17.672 18.867 0 40.79-11.028 54.21-18.602 7.64-4.252 17.273-11.892 25.179-17.671 5.979-4.451 5.78-9.766 10.762-9.168 4.983 0.598 1.329 5.912-5.647 11.958-6.975 6.112-17.937 14.217-26.773 18.8z"
            fill = "#202020" p-id = "6376"></path><path
            d = "M800.866 691.08a114.533 114.533 0 0 0-6.909 0h-0.664c5.846-18.402-7.042-31.888-41.256-47.367-35.476-15.612-63.777-14.084-68.56 17.605-0.332 1.66-0.598 3.321-0.73 5.049a53.214 53.214 0 0 0-7.973 3.587c-16.741 9.102-25.843 25.644-30.892 45.973-5.049 20.262-6.51 44.776-7.905 72.413-0.864 13.818-6.577 32.553-12.357 52.483-58.13 41.455-138.848 59.392-207.408 12.623-4.65-7.308-9.965-14.616-15.479-21.79a920.114 920.114 0 0 0-10.63-13.62 43.182 43.182 0 0 0 17.805-3.322 22.588 22.588 0 0 0 12.357-12.755c4.185-11.294 0-27.105-13.42-45.175-13.353-18.137-36.007-38.532-69.29-58.994-24.449-15.28-38.134-33.881-44.512-54.077-6.444-20.263-5.58-42.186-0.664-63.777 9.5-41.522 33.881-81.914 49.36-107.225 4.186-3.056 1.528 5.713-15.678 37.668-15.413 29.231-44.312 96.662-4.783 149.344 1.063-37.469 9.965-75.735 25.045-111.41 21.857-49.626 67.63-135.592 71.218-204.152 1.927 1.328 8.304 5.713 11.227 7.308 8.371 4.982 14.682 12.223 22.854 18.8a56.47 56.47 0 0 0 38.2 13.287c15.944 0 28.367-5.248 38.664-11.16 11.294-6.378 20.196-13.553 28.766-16.277 17.937-5.647 32.287-15.612 40.392-27.238 13.951 55.14 46.504 134.662 67.364 173.46 11.095 20.594 33.218 64.374 42.718 117.057 6.045-0.133 12.689 0.664 19.863 2.524 24.913-64.64-21.192-134.33-42.252-153.729-8.503-8.237-8.968-11.958-4.65-11.758 22.787 20.196 52.815 60.92 63.777 106.826 4.982 20.927 5.979 42.916 0.664 64.64 2.657 1.13 5.315 2.26 7.972 3.588 40.06 19.465 54.875 36.406 47.766 59.591z"
            fill = "#FFFFFF" p-id = "6377"></path><path
            d = "M515.399 516.225c-36.938 0.133-73.012 16.675-103.505 47.567-30.56 30.826-54.077 74.54-67.63 125.428l4.052 2.525v0.265c31.225 19.798 53.48 39.728 67.232 58.33 14.549 19.664 20.993 38.797 14.815 55.406a34.08 34.08 0 0 1-17.937 18.8l-2.724 0.997c4.916 6.444 9.7 13.088 14.15 19.93 62.714 41.721 135.659 26.308 190.467-11.426 5.315-18.469 10.165-35.609 10.829-46.371 1.395-27.57 2.79-52.616 8.238-74.407 5.447-21.923 16.077-41.853 36.14-52.815 1.13-0.664 2.259-0.996 3.388-1.528a50.224 50.224 0 0 1 1.462-6.245c-16.077-41.322-39.263-75.735-67.099-99.651-27.902-23.916-59.591-36.605-91.812-36.805z m157.449 143.166l-0.133 0.332v-0.133l0.066-0.265z"
            fill = "#E6E6E6" p-id = "6378"></path><path
            d = "M597.644 235.275a69.756 69.756 0 0 1-14.283 43.58 273.643 273.643 0 0 0-14.483-5.978l-8.437-2.99c1.927-2.325 5.647-4.982 7.108-8.437a44.444 44.444 0 0 0 3.322-16.143l0.067-0.665a44.71 44.71 0 0 0-2.326-15.678 28.832 28.832 0 0 0-7.175-12.224 14.815 14.815 0 0 0-10.363-4.65h-0.465a15.147 15.147 0 0 0-10.032 3.986 28.832 28.832 0 0 0-8.105 11.626 44.91 44.91 0 0 0-3.322 16.143v0.664a47.7 47.7 0 0 0 0.598 9.301 117.788 117.788 0 0 0-23.517-7.972 79.455 79.455 0 0 1-0.665-8.836v-0.863a68.76 68.76 0 0 1 5.846-29.696 52.682 52.682 0 0 1 16.61-21.79 36.805 36.805 0 0 1 22.985-8.172h0.399c8.304 0 15.413 2.391 22.72 7.706a51.819 51.819 0 0 1 17.074 21.525c4.185 9.168 6.245 18.136 6.444 28.766l0.067 0.797z m-125.56 10.895a69.756 69.756 0 0 0-18.403 8.305 41.389 41.389 0 0 0 0.133-9.966v-0.531a43.249 43.249 0 0 0-3.189-12.755 24.58 24.58 0 0 0-6.377-9.368 10.497 10.497 0 0 0-7.906-2.99c-2.79 0.267-5.116 1.595-7.308 4.32a24.714 24.714 0 0 0-4.65 10.363 41.588 41.588 0 0 0-0.864 13.619v0.531a42.12 42.12 0 0 0 3.189 12.822 24.381 24.381 0 0 0 7.706 10.364l-6.776 5.315-5.182 3.72a46.903 46.903 0 0 1-10.63-15.944c-3.52-7.972-5.447-15.945-5.978-25.312v-0.066a71.151 71.151 0 0 1 2.99-25.91 44.378 44.378 0 0 1 11.094-19.398 23.85 23.85 0 0 1 17.538-7.84c5.58 0 10.497 1.86 15.612 5.98a45.175 45.175 0 0 1 13.22 18.003c3.522 7.972 5.315 15.944 5.913 25.378v0.066c0.2 3.987 0.2 7.64-0.133 11.294z"
            fill = "#FFFFFF" p-id = "6379"></path><path
            d = "M499.853 268.625c0.664 2.259 4.318 1.927 6.444 2.99 1.794 0.93 3.322 2.99 5.315 3.056 1.993 0.066 5.049-0.665 5.315-2.658 0.332-2.524-3.455-4.185-5.847-5.115-3.122-1.262-7.108-1.86-10.031-0.2-0.665 0.333-1.395 1.196-1.196 1.994z m-21.392 0c-0.664 2.259-4.318 1.927-6.378 2.99-1.86 0.93-3.321 2.99-5.38 3.056-1.994 0.066-5.05-0.665-5.315-2.658-0.333-2.524 3.454-4.185 5.846-5.115 3.122-1.262 7.175-1.86 10.098-0.2 0.664 0.333 1.328 1.196 1.13 1.994z"
            fill = "#202020"></path></svg></span>
      </div>
    </div>
    <div class = "profile border">
      <!--      <span v-html = "game.short_description"></span>-->
      <div class = "GamePro p-2 border"
           @click = "router.push({name:'dn',params:{content:game.detailed_description,name:game.gameT1,id:Router.params.id}})"
           v-html = "game.detailed_description">
      </div>
    </div>
    <div class = "border makers">
      <ul>
        <li class = "border p-2">发布时间:
          <div>{{ game.release_date }}</div>
        </li>
        <li class = "border p-2">开发商:
          <div><span v-for = "(item,index) in game.developers" :key = "index">{{ item }},</span></div>
        </li>
        <li class = "border p-2">发行商:
          <div><span v-for = "(item,index) in game.publishers" :key = "index">{{ item }}</span></div>
        </li>
        <li class = "border p-2">DLCs:
          <div><span v-if = "game.DLCs">总计{{ game.DLCs.length }}款</span>
            <span v-if = "!game.DLCs">总计 0 款</span></div>
        </li>
      </ul>
    </div>
    <div class = "configure border">
      <div v-html = "game.badCfg === '' ? ero:game.badCfg"></div>
    </div>
    <div class = "buy border p-2" @click = "sendBuy">
      {{ game.is_free ? '免费开玩' : '购买' }}
    </div>
  </div>

</template>

<style scoped>
.displayed {
  height: 234px;
  max-height: 234px;
}

.displayed img {
  width: 100%;
}

.displayed video {
  width: 100%;
}

.title {
  margin-bottom: 120px;
}

.displayedList ul {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 72px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.displayedList ul::-webkit-scrollbar {
  display: none;
}

.displayedList ul li {
  position: relative;
  width: 120px;
  min-width: 120px;
  height: 200px;
  min-height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.displayedList ul li:not(:first-child) {
  margin-left: 2px;
}

.displayedList ul li img {
  max-width: 100%;
  max-height: 100%;
}

.dis {
  font-size: 16px;
  margin-left: 10px;
}

svg {
  position: absolute;
  top: 7%;
  left: 32%;
}

.Rpr {
  color: black;
  font-size: 30px;
}

.Rrr {
  font-size: 18px;
  text-decoration: line-through;
  color: gray;
  margin-left: 8px;
}

.priceBox div {
  font-size: 24px;
}

.t1 {
  color: black;
  font-size: 18px;
}

.t2 {
  font-size: 14px;
  color: gray;
}

.label {
  width: 100%;
}

.label span {
  font-size: 14px;
  display: inline-block;
  flex-wrap: wrap;
  padding: 2px 8px 2px 8px;
  margin-right: 10px;
}

.GamePro {
  min-height: 20px;
  max-height: 800px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.GamePro p img {
  position: relative;
  width: 100%;
}

.SyLogo svg {
  position: relative;
}

.makers ul {
  padding: 0;
}

.makers ul li {
  margin: 0;
  padding: 0;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
}

.makers ul li div {
  margin-left: 4px;
  min-width: 10px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.configure div {
  font-size: 14px;
}

</style>

<style>
.bb_img {
  width: 100%;
}

.bb_ul {
  font-size: 14px;
  padding: 0;
}

.bb_ul li {
  margin-top: 8px;
}

.buy {
  width: 390px;
  position: fixed;
  bottom: 97px;
  text-align: center;
  background-color: black;
  color: white;
}
</style>